<template>
  <div class="find">
    <van-nav-bar
      title="发现"
      left-arrow
      @click-left="goDetail('/home', '')"
      fixed
    />
    <van-swipe>
      <van-swipe-item v-for="mvswipers in mvswiper" :key="mvswipers.id"
        ><video autoplay controls :src="mvswiper" class="mv"></video
      ></van-swipe-item>
    </van-swipe>
    <van-tabs sticky>
      <van-tab title="精选">
        <!-- 精选1 -->
        <div class="jingxuan">
          <div class="title">
            <van-icon
              name="https://b.yzcdn.cn/vant/icon-demo-1126.png"
              class="icon"
            />
            <span class="name">科幻fans布玛</span>
          </div>
          <div class="desc">
            <p>男子发现宇宙本源是蓝色无知，进入更高级的世界，被真相震撼...</p>
          </div>
          <div class="video">
            <video autoplay controls :src="mvswiper" class="mv"></video>
          </div>
          <div class="bottom">
            <span class="bottom1">精选</span>
            <span class="bottom2"><van-icon name="chat-o" />5</span>
            <span class="bottom3"><van-icon name="good-job-o" />187</span>
            <span class="bottom4"><van-icon name="ellipsis" /></span>
          </div>
        </div>
        <!-- 精选2 -->
        <div class="jingxuan">
          <div class="title">
            <van-icon
              name="https://b.yzcdn.cn/vant/icon-demo-1126.png"
              class="icon"
            />
            <span class="name">DS女老诗</span>
          </div>
          <div class="desc">
            <p>
              奔跑吧：郑凯×苗苗合体撒糖，整齐节目狂撒狗粮，齁甜！<br />奔跑吧：郑凯×苗苗合体撒糖，整齐节目狂撒狗粮，齁甜！...
            </p>
          </div>
          <div class="video">
            <video autoplay controls :src="mvswiper" class="mv"></video>
          </div>
          <div class="bottom">
            <span class="bottom1">精选</span>
            <span class="bottom2"><van-icon name="chat-o" />1</span>
            <span class="bottom3"><van-icon name="good-job-o" />85</span>
            <span class="bottom4"><van-icon name="ellipsis" /></span>
          </div>
        </div>
        <!-- 精选3  // 多余的文字省略展开-->
        <!-- <div class="content-wrap">
          <div
            :class="['content', expande ? 'expande' : 'close']"
            ref="content"
          >
            思路：1、判断当前内容是否超过三行。此处可以给每行设置一个行高line-height,
            渲染完后超过三倍的行高即认为是内容超过了三行。
            2、展示/收起状态的切换可以通过data中的参数来绑定。
            3、在底部使用position:absolute来绝对定位展开该在的位置。
            4、根据业务需求来设定好展开和收起按钮需要呆的地方。
          </div>
          <div class="expande-button-wrap" v-if="needShowExpande">
            <div class="expande-button" @click="expandeClick" v-if="!expande">
              <span style="color: black">...</span> 展开
            </div>
            <div class="expande-button" @click="expandeClick" v-else>收起</div>
          </div>
        </div> -->
        <div class="jingxuan">
          <div class="title">
            <van-icon
              name="https://b.yzcdn.cn/vant/icon-demo-1126.png"
              class="icon"
            />
            <span class="name">DS女老诗</span>
          </div>
          <div class="desc">
            <p>
              奔跑吧：郑凯×苗苗合体撒糖，整齐节目狂撒狗粮，齁甜！<br />奔跑吧：郑凯×苗苗合体撒糖，整齐节目狂撒狗粮，齁甜！...
            </p>
          </div>
          <div class="video">
            <video autoplay controls :src="mvswiper" class="mv"></video>
          </div>
          <div class="bottom">
            <span class="bottom1">精选</span>
            <span class="bottom2"><van-icon name="chat-o" />1</span>
            <span class="bottom3"><van-icon name="good-job-o" />85</span>
            <span class="bottom4"><van-icon name="ellipsis" /></span>
          </div>
        </div>
      </van-tab>
      <van-tab title="视频">2</van-tab>
      <van-tab title="文章">3</van-tab>
    </van-tabs>
  </div>
</template>
<script>
export default {
  data: () => ({
    id: 't0032kwa29w',
    mvswiper: [],
    expande: true,
    needShowExpande: false
  }),
  methods: {
    async getMvSwiper() {
      const res = await this.$http.getMvSwiper(this.id)
      this.mvswiper = res.data.data.t0032kwa29w
    },
    goTop() {

    },
    // 多余的文字省略展开
    // expandeClick() {
    //   console.log('expandeClick')
    //   this.expande = !this.expande
    // }
    // 返回上一页
    // onClickLeft() {
    //   this.$router.go(-1)
    // }
  },
  created() {
    this.getMvSwiper()
  }
  // 多余的文字省略展开
  // mounted() {
  //   this.$nextTick(() => {
  //     let lineHeight = 1
  //     if (this.$refs.content.offsetHeight > lineHeight * 3) {
  //       this.expande = false
  //       this.needShowExpande = true
  //     } else {
  //       this.expande = true
  //     }
  //   })
  // }
}
</script>
<style lang="less" scoped>
.find {
  video {
    width: 100%;
    height: 200px;
  }
  .jingxuan {
    margin-top: 30px;
    .title {
      display: flex;
      .icon {
        font-size: 40px;
      }
      .name {
        padding-left: 20px;
        padding-top: 10px;
      }
    }
    .desc {
      font-size: 15px;
      text-indent: 2em;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      margin-left: 10px;
    }
    .bottom {
      font-size: 12px;
      .bottom1 {
        padding-left: 10px;
      }
      .bottom2 {
        padding-left: 220px;
      }
      .bottom3 {
        padding-left: 20px;
      }
      .bottom4 {
        padding-left: 20px;
      }
    }
  }
}
</style>
